<template>
    <FloatingConfigurator />
    <div
        class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
        <div class="flex flex-col items-center justify-center">
            <div style="
          border-radius: 56px;
          padding: 0.3rem;
          background: linear-gradient(
            180deg,
            var(--primary-color) 10%,
            rgba(33, 150, 243, 0) 30%
          );
        ">
                <div class="w-full bg-surface-0 dark:bg-surface-900 pt-20 pb-10 px-8 sm:px-20"
                    style="border-radius: 53px">
                    <div class="text-center mb-8">
                        <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg"
                            class="mb-8 w-16 shrink-0 mx-auto">
                            <!-- SVG 图标内容 -->
                        </svg>
                        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
                            学员跟进系统
                        </div>
                    </div>

                    <div>
                        <label for="email1"
                            class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">账号</label>
                        <InputText id="email1" type="text" placeholder="输入学号或者工号" class="w-full md:w-[30rem] mb-8"
                            v-model="sn" />

                        <label for="password1"
                            class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">密码</label>
                        <Password id="password1" v-model="pswd" placeholder="Password" :toggleMask="true" class="mb-4"
                            fluid :feedback="false"></Password>

                        <div class="flex items-center justify-between mt-2 mb-8 gap-8">
                            <div class="flex items-center">
                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
                                <label for="rememberme1">记住我</label>
                            </div>
                            <span
                                class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">忘记密码?</span>
                        </div>
                        <Button label="登 录" class="w-full" @click="onLogin"></Button>
                        <!-- 显示提示信息 -->
                        <label class="block text-center">{{ TipStr }}</label>
                    </div>
                </div>
            </div>

            <app-footer style="position: absolute; bottom: 2rem"></app-footer>
        </div>
    </div>
</template>

<script setup>
import FloatingConfigurator from "@/components/FloatingConfigurator.vue";
import { UserService } from "@/service/UserService";
import { Md5 } from "ts-md5";
import { ref } from "vue";
import { useRouter } from "vue-router";
import AppFooter from "../../../layout/AppFooter.vue";
const router = useRouter();
const sn = ref("");
const pswd = ref("");
const checked = ref(false);
const TipStr = ref("");

function onLogin() {
    TipStr.value = "";
    const pswdstr = Md5.hashStr(pswd.value).toString();
    UserService.login(sn.value, pswdstr)
        .then((data) => {
            if (data.Code != 1000) {
                TipStr.value = data.Title;
                return;
            }
            localStorage.setItem("Authorization", data.Title);
            const SnStr = data.Data.Sn;
            const role = data.Data.Role;
            data = JSON.stringify(data.Data);
            localStorage.setItem("user", data);
            if (role == 1) {
                router.push("/");
            } else {
                router.push("/client/" + SnStr + "/profile");
            }
        })
        .catch((error) => {
            TipStr.value = "登录失败" + error;
        });
}
</script>

<style scoped>
.pi-eye {
    transform: scale(1.6);
    margin-right: 1rem;
}

.pi-eye-slash {
    transform: scale(1.6);
    margin-right: 1rem;
}
</style>
